<template>
  <li class="meeting-item" @click="enterMeeting">
    <div
      :style="{ backgroundImage: `url(${meetingInfo.coverImg})` }"
      class="info-wrapper"
    >
      <div class="info">
        <p class="title">{{ meetingInfo.meetingName }}</p>
        <p class="meeting-id">会议ID：{{ meetingInfo.meetingId }}</p>
        <div
          v-if=" meetingInfo.meetingStatus == 1 && totalTime > 0"
          class="countdown">
          <p class="label">倒计时</p>
          <p class="time" v-if="day || hour || min || secord">
           <span v-if="day !== '00'">{{day}} 天</span> {{ hour }}:{{ min }}:{{ secord }}
          </p>
        </div>
        <div v-if="meetingInfo.meetingStatus == 2 && !totalTime" class="btn">
          进行中
        </div>
      </div>
    </div>
    <div class="address-date">
      <p class="date">时间：{{ meetingInfo.meetingTime}}</p>
      <p class="address">地点：{{ meetingInfo.meettingPlace }}</p>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    meetingInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      timer: null,
      totalTime: '',
      day: '',
      hour: '',
      min: '',
      secord: ''
    }
  },
  methods: {
    transformTime (time) {
      let startTime = new Date(time).getTime()
      let nowTime = new Date().getTime()
      if (startTime - nowTime > 0) {
        return parseInt((startTime - nowTime) / 1000)
      } else {
        return ''
      }
    },
    enterMeeting () {
      this.$emit('enterMeeting', this.meetingInfo.meetingId)
    },
    initTime () {
      this.totalTime = this.transformTime(this.meetingInfo.meetingStartTime)
      if (this.totalTime > 0) {
        this.timer = setInterval(() => {
          this.day = Math.floor(this.totalTime / 86400)
          this.day = this.day > 9 && this.day > 0 ? this.day : `0${this.day}`
          this.hour = Math.floor((this.totalTime % 86400) / 3600)
          this.hour =
            this.hour > 9 && this.hour > 0 ? this.hour : `0${this.hour}`
          this.min = Math.floor((this.totalTime % 3600) / 60)
          this.min = this.min > 9 && this.min > 0 ? this.min : `0${this.min}`
          this.secord = Math.floor(this.totalTime % 60)
          this.secord =
            this.secord > 9 && this.secord > 0
              ? this.secord
              : `0${this.secord}`
          this.totalTime--
          if (this.totalTime === 0) {
            this.live.flowStatus = 4
            clearInterval(this.timer)
          }
        }, 1000)
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initTime()
    })
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang='stylus' scoped>
.meeting-item
  width 100%
  margin-bottom 20px
  .info-wrapper
    width 100%
    height 90px
    // background url('~static/img/banner.png') no-repeat center / cover
    background-repeat no-repeat
    background-size cover
    background-position center
    background-color #fff
    border-radius 8px 8px 0 0
    position relative
    .info
      width 100%
      height 100%
      background rgba(0, 0, 0, 0.3)
      border-radius 8px 8px 0 0
      padding 21px 8px 0 9px
      box-sizing border-box
      position absolute
      left 0
      right 0
      .title
        padding 0
        line-height 28px
        font-size 20px
        font-weight 700
        color #fff
      .meeting-id
        line-height 16px
        font-size 12px
        color #fff
        margin-top 6px
      .progress
        width 52px
        height 25px
        opacity 0.8
        background #39DB69
        border-radius 2px
        border-radius 2px
        color #fff
        border-radius 2px
        position absolute
        right 8px
        bottom 8px
        font-size 12px
        display flex
        justify-content center
        align-items center
      .countdown
        min-width 116px
        height 25px
        background rgba(0, 0, 0, 0.3)
        display flex
        align-items center
        border-radius 2px
        padding 0 7px 0 9px
        position absolute
        right 8px
        bottom 8px
        .label
          line-height 16px
          font-size 12px
          color #F9FAFB
        .time
          line-height 18px
          font-size 14px
          font-family 'PingFangSC-Medium', 'PingFang SC'
          color #fff
          margin-left 8px
      .btn
        width 52px
        height 25px
        background rgba(57,219,105, 0.8)
        line-height 25px
        text-align center
        font-size 12px
        color #F9FAFB
        border-radius 2px
        position absolute
        right 8px
        bottom 8px
  .address-date
    width 100%
    background #fff
    border-radius 0 0 8px 8px
    padding 15px 12px
    .date, .address
      line-height 16px
      font-size 12px
      color #666666
    .address
      width 245px
      noWrap()
      margin-top 8px
</style>
